<!--课题申报-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
        <div class="flex">
            <div class="search-container-item right20">
                <div class="item-name">课程名称：</div>
                <el-input size="mini" v-model="dataForm.subName" style="width: 122px;"></el-input>
            </div>
            <div class="search-button color-primary width70" @click="initList">
                <img src="../../../assets/assessment/icon-search.png" alt="" />
                <span>查询</span>
            </div>
        </div>
        <div class="search-button color-primary width70" @click="sbBtn()">
            <img src="../../../assets/classHours/icon-addBig.png" alt="" />
            <span>申报</span>
        </div>
    </div>
    <div class="table-container table-css">
        <el-table ref="multipleTable" :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" @selection-change="handleSelectionChange">
            <el-table-column type="selection"  align="center" width="55"></el-table-column>
            <el-table-column label="操作" align="center" min-width="150">
                <div class="btn-css" slot-scope="scope">
                    <span class="small-btn color-green" @click="sbBtn(scope.row.fillId)" v-if="scope.row.isCommit == 2">
                        <img src="../../../assets/assessment/icon-plan-record-detail.png"> 修改
                    </span>
                    <span class="small-btn btn3" v-else>
                        <img src="../../../assets/assessment/disabled-edit.png"> 修改
                    </span>
                </div>
            </el-table-column>
            <el-table-column prop="subCategoryName" label="课程分类名称" align="center" min-width="150"></el-table-column>
            <el-table-column prop="currentStageName" label="当前阶段/流程" align="center" min-width="200">
              <template slot-scope="scope">{{scope.row.currentStageName+'/'+scope.row.currentFlowName}}</template>
            </el-table-column>
            <el-table-column prop="subjectLeaderName" label="课题负责人" align="center" min-width="120"></el-table-column>
            <el-table-column prop="dept" label="部职别" align="center" min-width="100"></el-table-column>
            <el-table-column prop="researchObject" label="研究目标" align="center" min-width="100"></el-table-column>
            <el-table-column prop="researchContent" label="研究内容及研究方法" align="center" min-width="200"></el-table-column>
            <el-table-column prop="planResult" label="预期成果" align="center" min-width="100"></el-table-column>
            <el-table-column prop="finishDate	" label="完成时限" align="center" min-width="100"></el-table-column>
            <el-table-column prop="projectCategory" label="项目类别" align="center" min-width="100"></el-table-column>
            <el-table-column prop="subjectMember" label="课题组成员" align="center" min-width="130"></el-table-column>
            <el-table-column prop="fillDate" label="填报日期" align="center" min-width="150"></el-table-column>
            <el-table-column prop="fillDate" label="下载附件" align="center" min-width="180">
                <template slot-scope="scope">
                    <span class="small-btn color-yellow" @click="downloadFile(scope.row)">
                        <img src="../../../assets/assessment/icon-import-orange.png"> 下载附件
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="score" label="综合评审分数" align="center" min-width="150"></el-table-column>
            <el-table-column prop="count" label="评审结果" align="center" min-width="120">
                <template slot-scope="scope">
                    <span class="small-btn color-primary" @click="detailInfo(scope.row)">
                        <img src="../../../assets/assessment/icon-look.png"> 详情
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" align="center" min-width="200"></el-table-column>
        </el-table>
        <h1 class="total-notice">当前共找到{{total}}条记录，当前显示{{(dataForm.pageNo-1)*50 == 0?1:(dataForm.pageNo-1)*50}}-{{total>50?dataForm.pageNo*50:total}}条</h1>
        <div class="pagination-block">
            <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
            :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
    </div>
    <div class="button-group">
          <div class="" @click="saveInfo">提交</div>
          <div class="" @click="cancelBtn">取消</div>
    </div>
    <!-- 评审结果详情 -->
    <psDialog ref="psWindow" title="评审结果详情" :currentFlow="currentFlow" :currentStage="currentStage" :fillId="fillId"></psDialog>
  </div>
</template>

<script>
import {sbList,sbSubmit} from "@/api/teachingTopic";
import fileDownload from "js-file-download"
import Axios from 'axios'
import psDialog from './declareDetail.vue'
export default {
  data() {
    return {
      total:1,
      dataForm:{
        subName:'',//课题名称
        pageNo:1,
        pageSize:50
      },
      tableData: [],
      IDS:[],
      fillId:'',
      currentFlow:'',
      currentStage:''
    };
  },
  components:{psDialog },
  mounted(){
    this.initList();
  },
  methods: {
    handleSelectionChange(e){
      this.IDS = e.map(item=>{item.subjectId})
    },
    sbBtn(id){
      this.$router.push({
        path:'/teachingTopics/activity/declareForm',
        query:{
          fillId:id?id:'',
          type:1
        }
      })
    },
    //初始化表格
    async initList(){
      let res = await sbList(this.dataForm);
      if(res.code == 200){
        this.tableData = res.data.records;
        this.total = res.data.total
      }
    },
    detailInfo(row){
      this.fillId = row.fillId;
      this.currentFlow = row.currentFlow;
      this.currentStage = row.currentFlow;
      this.$refs.psWindow.psDialog = true;
    },
    downloadFile(){
        Axios({
            method: 'get',
            url: this.$store.state.studentUrl.baseUrl+'/examBatch/exportData/manageList',
            params:this.dataForm,
            headers: {'Content-Type': 'application/octet-stream' },
                responseType: 'blob'
        }).then(res => {
            fileDownload(res.data, '附件.xlsx');
        });
    },
    async saveInfo(){
      let IDS = '';
      let res = await sbSubmit({fillIds:IDS});
      if(res.code == 200){
        this.initList();
      }
    },
    cancelBtn(){
      this.$refs.multipleTable.clearSelection();
    }
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
 /deep/ .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
 /deep/ .el-table__footer-wrapper td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table thead.is-group th.el-table__cell{
    border-color: #c7d7eb;
  }
 /deep/ .el-table--border th, .el-table__fixed-right-patch{
    border-color: #c7d7eb;
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.right20{margin-right: 20px;}
.width70{width: 70px;}
.flex{display: flex;align-items: center;}
.search-container {
  justify-content: space-between !important;
}
.color-green{
  background: #F1FFF8;
  border: 1px solid #02C86C;
  color: #02C86C;
  >img{width: 17px!important;height:17px!important}
}
.color-yellow{
    width: 114px;
    background: #FEF1E8;
    border: 1px solid #F86900;
    color: #F86900;
    margin-right: 35px;
}
.btn-css{
    .small-btn{width: 90px;}
  .btn3{
       background: #F6F6F6;
        border: 1px solid #A7A7A7;
        color:#A7A7A7;
        cursor: not-allowed;
    }
}
.right30{margin-right: 30px;display: inline-block;&:last-child{margin-right: 0;}}
 /deep/.button-group{
    div:nth-child(1){
        background: #F1F8FE;
        border: 1px solid #51AEF6;
        color: #51AEF6;
    }
    padding-bottom: 20px;
    margin-top: 50px;
  }
</style>
